<template>
  <div @click="autoFocus && autoFocus()" class="app-emotion">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      viewBox="0 0 16 16"
    >
      <path
        d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
      />
      <path
        d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"
      />
    </svg>
    <slot />
  </div>
</template>

<script setup>
const props = defineProps({
  autoFocus: { type: Function },
})
</script>

<style lang="scss" scoped>
// 暴露出去的触发按钮
.app-emotion {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-right: 14px;
  font-size: 15px;
  color: #7f7f7f;
  cursor: pointer;

  & > svg {
    height: 16px;
    margin-right: 4px;
  }

  &:hover {
    color: #1e80ff;
  }
}
</style>
